<!-- The ref attr used to find the swiper instance -->
<template>
    <div class="swapper">
        <swiper class="swiper-content" :options="swiperOption">
            <!-- slides -->
            <swiper-slide  v-for="item of dataList" :key="item.id"><img class="swiper-img" :src="item.url"/></swiper-slide>

            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
     </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        // 循环
        loop: true,
        // 每张播放时长3秒，自动播放
        autoplay: 2000,
        // 滑动速度
        speed: 1000
      },
      dataList: [
        {
          id: 1,
          url: 'http://img1.qunarzz.com/sight/p0/1907/cd/cdb4c750676d6d02a3.img.jpg_350x240_bdf8dbf1.jpg'
        },
        {
          id: 2,
          url: 'http://img1.qunarzz.com/sight/p0/1907/57/579777f732599db0a3.img.jpg_350x240_f3fae8d9.jpg'
        }
      ]
    }
  }
}
</script>
<style scoped>
.swapper >>> .swiper-pagination-bullet-active{
        background: #fff !important
}
.swapper{
    height: 0;
    width: 100%;
    padding-bottom: 2rem;
}
.swiper-content{
    height: 2rem;
}
.swiper-img{
    width: 100%;
    height: 2rem;
}
</style>>
